<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>浏览器数据传输</title>
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <div class="container">
    <h2>数据提取</h2>
    <div class="section">
      <div class="checkbox-row">
        <input type="checkbox" id="extract-localStorage" checked>
        <label for="extract-localStorage">localStorage</label>
      </div>
      <div class="checkbox-row">
        <input type="checkbox" id="extract-cookies" checked>
        <label for="extract-cookies">Cookies (包含 HttpOnly)</label>
      </div>
      <button id="extract-btn" class="btn">提取数据并下载</button>
    </div>

    <h2>数据导入</h2>
    <div class="section">
      <div class="note">
        <strong>注意：</strong> 导入操作会覆盖当前网站上同名的localStorage项和Cookie。
        Cookie的domain, path等属性将根据导入文件中的值尝试设置，但可能受浏览器限制。
      </div>
      <textarea id="import-area" placeholder="将 storage_state.json 格式的数据粘贴到此处..."></textarea>
      <label for="import-file" class="btn file-label">或选择文件导入</label>
      <input type="file" id="import-file" accept=".json" style="display: none;">
      <button id="import-btn" class="btn">导入数据</button>
    </div>

    <div id="status-area"></div>
    <div class="progress-bar-container" style="display: none;">
        <div class="progress-bar"></div>
    </div>
  </div>

  <script src="popup.js"></script>
</body>
</html>
